<!--Card.vue-->
<script setup lang="ts">
import { computed, PropType } from "vue";

import {
  IconAdam,
  IconHnwDC1000,
  IconValve,
  IconSwitch,
  IconThermocouple,
  IconPressductor,
  IconLed,
  Icon4024,
  Icon4118,
  Icon4150
} from "./DeviceIcons";

import More2Fill from "@iconify-icons/ri/more-2-fill";
import { Device, DeviceStatus } from "@/api/deviceApi";

defineOptions({ name: "ReCard" });

const props = defineProps({
  device: { type: Object as PropType<Device> },
  deviceStatus: { type: Object as PropType<DeviceStatus> },
  isRuning: { type: Boolean }
});

const ICONLIST = {
  Adam4024: Icon4024,
  Adam4118: Icon4118,
  Adam4150: Icon4150,
  HnwDC1000: IconHnwDC1000,
  Valve: IconValve,
  Thermocouple: IconThermocouple,
  Pressductor: IconPressductor,
  LedIndicator: IconLed,
  Switch: IconSwitch
};

const emit = defineEmits(["manage-device", "delete-item"]);

const handleClickManage = (device: Device) => emit("manage-device", device);
const handleClickDelete = (device: Device) => emit("delete-item", device);

const cardClass = computed(() => [
  "list-card-item",
  { "list-card-item__disabled": !props.device.isSetup }
]);

// const cardLogoClass = computed(() => [
//   "list-card-item_detail--logo",
//   { "list-card-item_detail--logo__disabled": !props.device.isSetup }
// ]);
</script>

<template>
  <div :class="cardClass">
    <div class="list-card-item_detail bg-bg_color">
      <el-row justify="space-between">
        <div
          :style="{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: device.model === 'Valve' ? '58px' : '56px',
            height: device.model === 'Valve' ? '58px' : '56px',
            padding: device.model === 'HnwDC1000' ? '12px' : '10px',
            backgroundColor: device.isSetup ? '#e0ebff' : '#EEEEEE',
            borderRadius: '50%'
          }"
        >
          <component
            :style="{
              width: '100%',
              height:
                device.model === 'Adam4024' ||
                device.model === 'Adam4118' ||
                device.model === 'Adam4150'
                  ? '110%'
                  : '100%'
            }"
            :is="ICONLIST[device.model]"
          />
        </div>
        <div class="list-card-item_detail--operation">
          <el-tag
            :color="device.isSetup ? '#00a870' : '#eee'"
            effect="dark"
            class="mx-1 list-card-item_detail--operation--tag"
          >
            {{ device.isSetup ? "已连接" : "已断开" }}
          </el-tag>
          <el-dropdown trigger="click">
            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
            <template #dropdown>
              <el-dropdown-menu :disabled="!device.isSetup">
                <el-dropdown-item
                  :disabled="isRuning"
                  @click="handleClickManage(device)"
                >
                  管理
                </el-dropdown-item>
                <el-dropdown-item
                  :disabled="isRuning"
                  @click="handleClickDelete(device)"
                >
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-row>
      <p class="list-card-item_detail--name text-text_color_primary">
        {{ device.name }}
      </p>
      <p class="list-card-item_detail--desc text-text_color_regular">
        {{ device.spec }}
      </p>
      <p class="list-card-item_detail--disconnect-reason">
        <!-- 如果设备断开并且存在断开原因，则显示原因，否则显示占位符 -->
        {{
          !device.isSetup && deviceStatus?.msg ? deviceStatus.msg : "&#8203;"
        }}
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-card-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;

  &_detail {
    flex: 1;
    min-height: 140px;
    padding: 16px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      font-size: 32px;
      color: #0052d9;
      background: #e0ebff;
      border-radius: 50%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--name {
      margin: 24px 0 8px;
      font-size: 16px;
      font-weight: 400;
    }

    &--desc {
      display: -webkit-box;
      height: 40px;
      //margin-bottom: 24px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &--disconnect-reason {
      padding-top: 4px; /* Add some padding at the top */
      font-size: 12px;
      color: #f5222d; /* This is a typical red color for error/danger status */
    }
  }

  &__disabled {
    .list-card-item_detail--name,
    .list-card-item_detail--desc {
      color: var(--el-text-color-disabled);
    }

    .list-card-item_detail--operation--tag {
      color: #bababa;
    }
  }
}
</style>
